import React from "react";
import Footer from "@/components/common/Footer";

const Home = () => {
    // 定义变量
    const [newList,setNewList] = React.useState([]);
    const [recomList,setRecomList] = React.useState([]);
    const [cateList,setCateList] = React.useState([]);

    const getHomeData = async () => {
        let result = await React.Api.home();

        if(result && result.code === 1)
        {
            setNewList(result.data.newList);
            setRecomList(result.data.recomList);
            setCateList(result.data.cateList);
        }
    }

    React.useEffect(() => {
        getHomeData();
    },[]);

    const NewSwiper = () =>{
        if(newList.length > 0)
        {
            return (
                <>
                    <React.Vant.Swiper autoplay={5000}>
                        {newList.map(item => {
                            return (
                                <React.Vant.Swiper.Item key={item.id}>
                                    <React.Vant.Image src={item.thumb_cdn} style={{height:"40vw"}}/>
                                </React.Vant.Swiper.Item>
                            )
                        })}
                    </React.Vant.Swiper>
                </>
            )
        }
    }

    const RecomSwiper = () => {
        if(recomList.length > 0)
        {
            return (
                <>
                    <React.Vant.Swiper autoplay={5000}>
                        {recomList.map(item => {
                            return (
                                <React.Vant.Swiper.Item key={item.id}>
                                    <React.Router.NavLink to={'/product/product/info?proid='+ item.id} className="a_blok">
                                        <React.Vant.Image src={item.thumb_cdn} />
                                        <span>查看详情</span>
                                    </React.Router.NavLink>
                                </React.Vant.Swiper.Item>
                            )
                        })}
                    </React.Vant.Swiper>
                </>
            )
        }
    }

    const CateList = () => {
        if(cateList.length > 0)
        {
            return (
                <ul>
                    {cateList.map(item => {
                        return (
                            <li key={item.id}>
                                <img src={item.image_cdn} alt="" />
                                <div className="right">
                                    <p>
                                        {item.name}
                                    </p>
                                    <span>
                                        {item.createtime_text}
                                    </span>
                                </div>
                            </li>
                        )
                    })}
                </ul>
            );
        }
    }

    return (
        <>
            <React.Vant.Sticky
                zIndex={10}
            >
                <React.Vant.NavBar
                    title="租赁商城"
                    leftArrow={false}
                />
            </React.Vant.Sticky>

            {/* 轮播图 */}
            <div className="banner_shouy">
                <NewSwiper />
            </div>

            {/* 快捷导航 */}
            <div className="shouye_kuanj">
                <div className="swiper-wrapper" style={{ display: "flex" }}>
                    <div className="swiper-slide" style={{ width: "25%" }}>
                        <a href="list_zl.html">
                            <img src="/assets/images/kj.png" alt="" />{" "}
                            <p>产品租赁</p>
                        </a>
                    </div>
                    <div className="swiper-slide" style={{ width: "25%" }}>
                        <a href="hsb.html">
                            <img src="/assets/images/kj1.png" alt="" />{" "}
                            <p>我要归还</p>
                        </a>
                    </div>
                    <div className="swiper-slide" style={{ width: "25%" }}>
                        <a href="hsb.html">
                            <img src="/assets/images/kj2.png" alt="" />{" "}
                            <p>商品大全</p>
                        </a>
                    </div>
                    <div className="swiper-slide" style={{ width: "25%" }}>
                        <a href="#">
                            <img src="/assets/images/kj3.png" alt="" />{" "}
                            <p>关于我们</p>
                        </a>
                    </div>
                </div>
                <div className="swiper-pagination"></div>
            </div>

            {/* 产品中心 */}
            <div className="chan_p_center">
                <div className="chanp_k_sy" style={{marginBottom:'20px'}}>
                    <div className="sjpiue_chanp_list">
                        <RecomSwiper />
                    </div>
                </div>

                <div className="list_color">
                    <CateList />
                </div>
            </div>

            {/* 占位 */}
            <div style={{height:".75rem"}}></div>
            
            {/* 底部导航 */}
            <Footer />
        </>
    );
};

export default Home;
